<template>
  <view class="outterFrame">
    <view class="hot-container">
      <image class="logo" src="@/static/images/logo.png" mode="aspectFit" />
    </view>
    <view class="search-box" @click="onClickSearch">
      <mySearch placeholderText="uni-app"></mySearch>
    </view>
    <!-- tab选项 -->
    <view class="tabSticky">
      <myTabs
        :DataList="tabsData"
        :deFaultIndex="currentIndex"
        @tabClick="onReceiveTabClick"
      ></myTabs>
    </view>
    <!-- list界面 -->
    <scroll-view scroll-y class="list">
      <view>
        <swiper
          :current="currentIndex"
          @change="swiperChange"
          class="swiper"
          :style="{ height: swiperHeight + 'px' }"
        >
          <swiper-item v-for="(tabItem, tabIndex) in tabsData" :key="tabIndex" @animationfinish="swiperEnd">
            <uni-load-more status="loading" v-if="isLoading" />
            <block v-else>
              <list-items
                :class="'list-items' + tabIndex"
                :id="'list-items-id' + index"
                v-for="(item, index) in listData[tabIndex]"
                :key="index"
                :data="item"
                :ranking="index + 1"
                @click="onClickToDetail(item)"
              ></list-items>
            </block>
          </swiper-item>
        </swiper>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { getHotTabApi, getHotListFormTabType } from "@/apis/hot";
// import { create } from 'domain';
import myTabs from "../../components/myTabs/myTabs.vue";
import ListItems from "../../components/list-items/list-items.vue";

export default {
  components: { myTabs, ListItems },

  data() {
    return {
      tabsData: [],
      currentIndex: 0,
      listData: {},
      isLoading: false,
      itemListHeightData: {},
      currentItemListHeight: 0,
      pageScrollTop:0
    };
  },
  onPageScroll({ scrollTop }) {
    this.pageScrollTop = scrollTop
  },
  methods: {
    onClickSearch(){
      uni.navigateTo({url:'/subpkg/pages/search-blog/search-blog'})
    },
    //点击跳转
    onClickToDetail(item){
      // console.log(item);
      uni.navigateTo({url:`/subpkg/pages/blog-detail/blog-detail?author=${item.user_name}&articleId=${item._id}`,})
      // console.log(`author=${item.user_name}&articleId=${item._id}`);
    },
    swiperEnd(){
      if (this.listData[this.currentIndex]) return;
      this.getHotListData()
    },
    async getHotData() {
      const { data: res } = await getHotTabApi();
      // console.log(res.list)
      this.tabsData = res.list;
      this.getHotListData();
    },
    onReceiveTabClick(index) {
      // console.log(index);
      this.currentIndex = index;
      this.getHotListData();
      
    },
    async getHotListData() {
      this.isLoading = true;
      const id = this.tabsData[this.currentIndex].id;
      const { data: res } = await getHotListFormTabType(id);
      this.listData[this.currentIndex] = res.list;
      this.isLoading = false;
      setTimeout(async ()=>{
        await this.countItemListHeight()
      },0)
      
    },
    swiperChange(e) {
      if(this.pageScrollTop>=130){
        uni.pageScrollTo({ scrollTop: 130 })
      }
      // console.log(e.detail.current);
      this.currentIndex = e.detail.current;
      // this.currentIndex=tabIndex
      this.getHotListData();
    },
    countItemListHeight() {
      return new Promise((resolve, reject) => {
        const query = uni.createSelectorQuery().in(this);
        let sum = 0
        query
          .selectAll(`.list-items${this.currentIndex}`)
          .boundingClientRect((res) => {
            // console.log(res);
            sum = res.reduce((a,c)=>{return a+c.height},sum)
            // console.log(sum)
            this.itemListHeightData[this.currentIndex] = sum
            resolve(res)
          })
          .exec();
      });
    },
    getCurrentItemListHeight(){
      if(this.itemListHeightData[this.currentIndex]){
        this.currentItemListHeight = this.itemListHeightData[this.currentIndex]
      }else{
        this.countItemListHeight();
        this.currentItemListHeight = this.itemListHeightData[this.currentIndex]
      }
    }
  },
  created() {
    this.getHotData();
  },
  computed: {
    //自己计算swiperHeight方法
    swiperHeight() {
      if(this.itemListHeightData[this.currentIndex]){
        return this.itemListHeightData[this.currentIndex]+75
      }else{
        this.countItemListHeight();
        return this.itemListHeightData[this.currentIndex]+75
      }
      
    },
  },
};
</script>

<style lang="scss" scoped>
.outterFrame {
  //display: flex;
  //flex-direction: column;
  .hot-container {
    background-color: $uni-bg-color;
    .logo {
      height: 80px;
      width: 100%;
      // background-color:pink;
    }
  }
  .search-box {
    padding: 0 15px;
    margin-bottom: 15px;
  }
  .tabSticky{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 99;
  }

  .list {
    //flex: 1;
    box-sizing: border-box;
    padding: 10px 10px;
    .swiper {
      // height: 500rpx;
    }
  }
}
</style>
